<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GabrielxD's Secret Base</title>
    <!-- 网站图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 导入字体 -->
    <link rel="stylesheet" type="text/css"
        href="https://fonts.font.im/css?family=Comfortaa&amp;subset=cyrillic,cyrillic-ext,greek,latin-ext" />
    <link rel="stylesheet" type="text/css" href="https://fonts.font.im/css?family=Source+Sans+Pro" />
    <!-- fontawesome 字体图标 -->
    <!-- <script src="https://kit.fontawesome.com/d30ee37b07.js" crossorigin="anonymous"></script> -->
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/common.js"></script>
</head>

<body>
    <div class="app" id="app">
        <header class="top-navbar">
            <div class="left">
                <a class="toggle-aside-btn" id="toggle-aside">
                    <i class="fas fa-bars"></i>
                </a>
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="输入关键词搜索...">
                    <button class="search-btn">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="right">
                <div class="music-player">
                    <div class="music-cover">
                        <img src="upload/music_cover/music01.jpg">
                    </div>
                    <div class="music-player-info">
                        <div class="music-info">
                            <span class="music-title">終点の先が在るとするならば。</span>
                            <span class="music-author"> - ツユ</span>
                        </div>
                        <div class="music-control">
                            <div class="play-control clearfix">
                                <button class="left prev"><i class="fas fa-backward"></i></button>
                                <button class="left toggle-pause"><i class="fas fa-pause"></i></button>
                                <button class="left next"><i class="fas fa-forward"></i></button>
                                <button class="right volume">
                                    <i class="fas fa-volume-up"></i>
                                    <div class="volume-bar">
                                        <div class="volume-size"></div>
                                    </div>
                                </button>

                            </div>
                            <div class="progress-bar">
                                <div class="fake-progress-bar"></div>
                                <div class="progress">
                                    <div class="circle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <audio src="media/audio/music01.mp3"></audio>
                </div>
                <a href="login.html" class="login"><i class="fas fa-sign-in-alt"></i>登录</a>
                <a href="register.html" class="register"><i class="fas fa-user-plus"></i>注册</a>
            </div>
        </header>
        <aside class="left-aside">
            <a href="index.html" title="GabrielxD's Playground" class="brand">
                <i class="fas fa-carrot"></i>
                <span class="text">GabrielxD</span>
            </a>
            <div class="wrapper">
                <div class="host">
                    <div class="logo">
                        <h1>
                            <a href="index.html">
                                <img src="image/logo.png">
                            </a>
                        </h1>
                    </div>
                    <div class="text">
                        <strong data-unfold-text="珈百璃" data-folded-text="Gab">珈百璃</strong>
                        <p>MOE IS JUSTICE!</p>
                    </div>
                </div>
                <div class="separation"></div>
                <ul class="navigation">
                    <li class="title">
                        <span>导航</span>
                    </li>
                    <li>
                        <a href="index.html">
                            <i class="fas fa-home item-icon"></i>
                            <span>主页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-info-circle item-icon"></i>
                            <span>关于本站</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md"
                            target="_blank">
                            <i class="fas fa-question-circle item-icon"></i>
                            <span>提问的智慧</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="fas fa-cubes item-icon"></i>
                            <span>一些小作品</span>
                            <i class="fas fa-angle-right toggle-fold"></i>
                        </a>
                        <ul class="sub-nav">
                            <li>
                                <a href="https://gabrielxd.gitee.io/todo-list/" target="_blank">
                                    <i class="fas fa-check-circle item-icon"></i>
                                    <span>待办清单</span>
                                </a>
                            </li>
                            <li>
                                <a href="http://gabrielxd.gitee.io/feelfreetrip_mobile/" target="_blank">
                                    <i class="fas fa-plane-departure item-icon"></i>
                                    <span>随便旅旅</span>
                                </a>
                            </li>
                            <li>
                                <a href="http://gabrielxd.gitee.io/heimamm/" target="_blank">
                                    <i class="fas fa-terminal item-icon"></i>
                                    <span>黑马面面</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="separation"></div>
                <ul class="others">
                    <li class="title">
                        <span>其它</span>
                    </li>
                    <li>
                        <a href="https://twitter.com/home">
                            <i class="fab fa-youtube item-icon"></i>
                            <span>Youtube</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.youtube.com/">
                            <i class="fab fa-twitter item-icon"></i>
                            <span>Twitter</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-cubes item-icon"></i>
                            <span>正经的东西</span>
                            <i class="fas fa-angle-right toggle-fold"></i>
                        </a>
                        <ul class="sub-nav">
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>看起来</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>这里并没有</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>什么正经的</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>东西呢</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-home item-icon"></i>
                            <span>不正经的东西</span>
                            <i class="fas fa-angle-right toggle-fold"></i>
                        </a>
                        <ul class="sub-nav">
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>看起来</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>这里也没有</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>什么不正经的</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>东西呢</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <a class="back-top">
                <img src="image/back_top.png">
                <div class="tip">返回顶部</div>
            </a>
        </aside>
        <main class="main-content">
            <div class="wrapper">
                <header class="main-header">
                    <h1 class="heading">ガヴリール の シークレットベース</h1>
                    <small class="subheading">萌は正義なのです ✟ テクノロジーがあれば何でもできるです</small>
                </header>
                <div class="post-panel">
                    <div class="panel-small">
                        <a href="#" class="post-img">
                            <img src="upload/post01/post01-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="post.html">sdfsdf.dev</a>
                            </h2>
                            <p class="post-summary">One day, I dreamed I had created a website for frontend developers,
                                which is an API tool for generating lorem ipsum (a.k.a. fake words), and getting
                                placeholder images. The dream even told me the domain of the website.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-12-06
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-user"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">sdfsdf.dev</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    233
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    114,514
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                    <div class="panel-small">
                        <a href="#" class="post-img">
                            <img src="upload/post02/post02-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="#">Nisi ad laborum nostrud in pariatur et magna sunt officia ut qui cupidatat
                                    ex officia.</a>
                            </h2>
                            <p class="post-summary">Ullamco laborum consequat aliqua aute reprehenderit pariatur
                                consequat exercitation.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-11-29
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-random"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">随机生成</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    195
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    1,919,810
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                    <div class="panel-small">
                        <a href="#" class="post-img">
                            <img src="upload/post03/post03-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="#">Eiusmod aliquip irure fugiat ut dolor irure ea irure id aliquip eiusmod
                                    deserunt est.</a>
                            </h2>
                            <p class="post-summary">Sit nostrud reprehenderit irure Lorem commodo id esse aliqua commodo
                                cillum. Quis proident officia ea dolore eiusmod tempor culpa in eiusmod aute.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-11-29
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-random"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">随机生成</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    136
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    114,514
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                    <div class="panel-small">
                        <a href="#" class="post-img">
                            <img src="upload/post04/post04-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="#">Ex id minim voluptate do esse cillum cillum irure velit et ad.</a>
                            </h2>
                            <p class="post-summary">Proident quis ipsum magna ea cillum. Officia id fugiat cupidatat
                                aliquip officia tempor ad. Consectetur tempor do ex ea consequat veniam exercitation
                                labore irure ex excepteur. Cillum ex duis culpa nostrud aliquip est proident
                                adipisicing.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-11-29
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-random"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">随机生成</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    195
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    1,919,810
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                    <div class="panel-small">
                        <a href="#" class="post-img">
                            <img src="upload/post05/post05-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="#">Consectetur fugiat veniam elit et eu nostrud fugiat consectetur duis.</a>
                            </h2>
                            <p class="post-summary">Est reprehenderit elit ea eiusmod consectetur tempor officia. Irure
                                voluptate commodo eu ullamco esse cillum consequat non eu consequat. Officia deserunt
                                veniam in sit ex aliqua eiusmod excepteur ipsum pariatur sint. Ad ad dolor ad laboris
                                enim.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-11-29
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-random"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">随机生成</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    136
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    114,514
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                    <div class="panel-small">
                        <a href="#" class="post-img">
                            <img src="upload/post06/post06-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="#">Enim velit occaecat laborum voluptate consequat tempor.</a>
                            </h2>
                            <p class="post-summary">Ex eiusmod irure aliquip mollit ipsum sunt sit irure dolore
                                cupidatat ea. Ea qui id enim ut reprehenderit minim sint laboris irure duis in amet in.
                                Ad duis culpa enim do esse velit eiusmod. Duis quis voluptate duis magna fugiat qui anim
                                ad tempor non aliqua. Commodo aliquip veniam reprehenderit non commodo esse nisi velit
                                exercitation dolore labore ad aute qui.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-11-29
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-random"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">随机生成</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    195
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    1,919,810
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                    <div class="panel">
                        <a href="#" class="post-img">
                            <img src="upload/post07/post07-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="#">Non est aliqua est do in.</a>
                            </h2>
                            <p class="post-summary">Excepteur deserunt nulla cupidatat ea mollit. Ex ad laborum fugiat
                                labore mollit esse non occaecat incididunt ipsum labore duis tempor. Reprehenderit ea
                                minim velit aliquip qui qui Lorem quis. Qui sint ut anim irure consectetur voluptate qui
                                anim officia deserunt. Laborum incididunt ad anim non deserunt culpa et laborum proident
                                voluptate mollit ad sint. Tempor cillum nulla non nostrud id ipsum sunt anim laborum
                                enim nulla do veniam.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-11-29
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-random"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">随机生成</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    136
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    114,514
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                    <div class="panel">
                        <a href="#" class="post-img">
                            <img src="upload/post08/post08-01.jpg">
                        </a>
                        <div class="post-info">
                            <h2 class="post-title">
                                <a href="#">Culpa eu consectetur pariatur cillum commodo.</a>
                            </h2>
                            <p class="post-summary">Quis non reprehenderit ea deserunt culpa commodo et fugiat pariatur
                                proident do aliqua. Anim esse quis commodo sit Lorem culpa qui do. Dolore dolor laboris
                                adipisicing excepteur duis in aute nostrud magna cillum. Duis laborum id labore elit
                                ipsum commodo tempor eu pariatur id proident duis officia.</p>
                            <div class="separation"></div>
                            <div class="panel-footer">
                                <span class="left">
                                    <i class="far fa-clock"></i>
                                    2021-11-29
                                </span>
                                <span class="left post-author">
                                    <i class="fas fa-random"></i>
                                    <a href="https://sdfsdf.dev/" target="_blank">随机生成</a>
                                </span>
                                <span class="right">
                                    <i class="far fa-comments"></i>
                                    136
                                </span>
                                <span class="right">
                                    <i class="far fa-eye"></i>
                                    114,514
                                </span>
                            </div>
                        </div>
                        <div class="hover-shade"></div>
                        <a href="post.html" class="hover-link"></a>
                    </div>
                </div>
                <footer class="footer">
                    <span class="left">&copy; 2021 Copyright&nbsp;|&nbsp;Made
                        with ❤️ by <a href="https://space.bilibili.com/12270873" target="_blank">GabrielxD</a></span>
                    <span class="right">Powered by <a href="http://vanilla-js.com/"
                            target="_blank">Vanilla.js</a>&nbsp;|&nbsp;Refer to <a
                            href="https://www.ihewro.com/archives/489/" target="_blank">handsome</a></span>
                </footer>
            </div>
        </main>
    </div>
</body>

</html>